<script lang="ts" setup>
import { onMounted, ref } from 'vue';

import { Page } from '@vben/common-ui';

import { Col, Row } from 'ant-design-vue';

import { getAnalyticsTrends } from '#/api/resource-center';
import StatisticCard from '#/components/hotel/StatisticsCard.vue';

import CostAnalysisChart from './components/CostAnalysisChart.vue';
import CostAnalysis from './components/CostAnalysisChart.vue';
import DecisionSupport from './components/DecisionSupport.vue';
import EfficiencyAnalysis from './components/EfficiencyAnalysis.vue';
import FaultAnalysis from './components/FaultAnalysis.vue';
import OccupancyTrendChart from './components/OccupancyTrendChart.vue';
import ReportGeneration from './components/ReportGeneration.vue';
import UtilizationAnalysis from './components/UtilizationAnalysis.vue';

const overview = ref({
  avgOccupancyRate: 0,
  avgCost: 0,
  faultRate: 0,
  efficiencyIndex: 0,
});

const loadOverview = async () => {
  try {
    const data = await getAnalyticsTrends();
    // 从趋势数据中计算平均值
    const occupancyValues = data.occupancyTrend.map((item) => item.value);
    const efficiencyValues = data.efficiencyTrend.map((item) => item.value);

    overview.value = {
      avgOccupancyRate:
        Math.round(
          (occupancyValues.reduce((a, b) => a + b, 0) /
            occupancyValues.length) *
            10,
        ) / 10,
      avgCost: 156.8,
      faultRate: 2.1,
      efficiencyIndex:
        Math.round(
          (efficiencyValues.reduce((a, b) => a + b, 0) /
            efficiencyValues.length) *
            10,
        ) / 10,
    };
  } catch (error) {
    console.warn('加载分析数据失败:', error);
  }
};

onMounted(() => {
  loadOverview();
});
</script>

<template>
  <Page title="数据分析与可视化">
    <div class="analytics-dashboard">
      <Row :gutter="16">
        <Col :span="6">
          <StatisticCard
            title="平均占用率"
            :value="overview.avgOccupancyRate"
            icon="mdi:chart-line"
            color="#1890ff"
            suffix="%"
          />
        </Col>
        <Col :span="6">
          <StatisticCard
            title="平均成本"
            :value="overview.avgCost"
            icon="mdi:currency-usd"
            color="#52c41a"
            suffix="元"
          />
        </Col>
        <Col :span="6">
          <StatisticCard
            title="故障率"
            :value="overview.faultRate"
            icon="mdi:alert-circle"
            color="#ff4d4f"
            suffix="%"
          />
        </Col>
        <Col :span="6">
          <StatisticCard
            title="效率指数"
            :value="overview.efficiencyIndex"
            icon="mdi:speedometer"
            color="#faad14"
            suffix="%"
          />
        </Col>
      </Row>

      <div class="dashboard-section">
        <Row :gutter="16">
          <Col :span="12">
            <OccupancyTrendChart />
          </Col>
          <Col :span="12">
            <CostAnalysisChart />
          </Col>
        </Row>
      </div>

      <div class="analysis-section">
        <Row :gutter="16">
          <Col :span="8">
            <UtilizationAnalysis />
          </Col>
          <Col :span="8">
            <CostAnalysis />
          </Col>
          <Col :span="8">
            <EfficiencyAnalysis />
          </Col>
        </Row>
      </div>

      <div class="fault-section">
        <Row :gutter="16">
          <Col :span="12">
            <FaultAnalysis />
          </Col>
          <Col :span="12">
            <ReportGeneration />
          </Col>
        </Row>
      </div>

      <div class="decision-section">
        <DecisionSupport />
      </div>
    </div>
  </Page>
</template>

<style scoped>
.analytics-dashboard {
  padding: 20px;
}

.dashboard-section {
  margin: 24px 0;
}

.analysis-section {
  margin: 24px 0;
}

.fault-section {
  margin: 24px 0;
}

.decision-section {
  margin: 24px 0;
}
</style>
